<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vision Pro AI 诗人对话</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/static/images/favicon.svg">
    <link rel="icon" type="image/x-icon" href="/static/images/favicon.ico">
    
    <!-- Three.js 和相关库 -->
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.180.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.180.0/examples/jsm/"
            }
        }
    </script>
    
    <!-- 样式 -->
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <!-- 加载界面 -->
    <div id="loading-screen">
        <div class="loading-content">
            <div class="loading-spinner"></div>
            <h2>正在加载 AI 诗人...</h2>
            <p id="loading-text">初始化3D场景</p>
            
            <!-- 加载进度条 -->
            <div class="loading-progress">
                <div class="progress-bar">
                    <div class="progress-fill" id="loading-progress-fill"></div>
                </div>
                <div class="progress-text">
                    <span class="progress-percentage" id="loading-percentage">0%</span>
                    <span class="progress-task" id="loading-task">初始化中...</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 主界面 -->
    <div id="main-container">
        <!-- WebXR 进入按钮 -->
        <div id="vr-button-container"></div>
        
        <!-- 控制面板 -->
        <div id="control-panel">
            <div class="panel-header">
                <h3>AI 诗人对话</h3>

                <button id="toggle-panel" class="toggle-btn">−</button>
            </div>
            
            <div class="panel-content">
                <!-- 对话历史 -->
                <div id="chat-history">
                    <div class="welcome-message">
                        <p>👋 你好！我是你的诗人朋友，让我们开始对话吧！</p>
                    </div>
                </div>
                
                <!-- 输入区域 -->
                <div id="input-area">
                    <div class="input-group">
                        <input type="text" id="text-input" placeholder="输入你想说的话..." />
                        <button id="send-btn" class="action-btn">发送</button>
                    </div>
                    
                    <div class="voice-controls">
                        <button id="voice-btn" class="voice-btn">
                            <span class="mic-icon">🎤</span>
                            <span class="btn-text">语音输入</span>
                        </button>
                        <div id="voice-status" class="voice-status"></div>
                    </div>
                </div>
                
                <!-- 诗人选择区域 -->
                <div id="poet-selector-area">
                    <div class="section-title">选择诗人角色</div>
                    <div class="poet-dropdown-container">
                        <select id="poet-dropdown" class="poet-dropdown">
                            <option value="">请选择诗人...</option>
                            <!-- 选项将通过JavaScript动态生成 -->
                        </select>
                        <div class="dropdown-icon">
                            <svg width="12" height="8" viewBox="0 0 12 8" fill="none">
                                <path d="M1 1L6 6L11 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                    </div>
                    <div id="current-poet-info" class="current-poet-info">
                        <div class="poet-avatar-display">
                    
                        </div>
                        <div class="poet-details">
                            <div class="poet-name">李清照</div>
                            <div class="poet-dynasty">宋朝</div>
                            <div class="poet-style">婉约派</div>
                        </div>
                    </div>
                </div>

                <!-- 设置区域 -->
                <div id="settings-area">
                    <div class="setting-group">
                        <label>
                            <input type="checkbox" id="auto-play-checkbox" checked>
                            自动播放音频
                        </label>
                    </div>
                    
                    <div class="setting-group">
                        <label>
                            <input type="checkbox" id="subtitles-checkbox" checked>
                            显示字幕
                        </label>
                    </div>
                </div>

            </div>
        </div>
        
        <!-- 状态指示器 -->
        <div id="status-indicator">
            <div class="status-item">
                <span class="status-label">连接状态:</span>
                <span id="connection-status" class="status-value">连接中...</span>
            </div>
            <div class="status-item">
                <span class="status-label">AI状态:</span>
                <span id="ai-status" class="status-value">待机</span>
            </div>
        </div>
        
        <!-- 字幕显示 -->
        <div id="subtitles">
            <div id="subtitle-text"></div>
        </div>
        

    </div>

    <!-- 错误提示 -->
    <div id="error-modal" class="modal">
        <div class="modal-content">
            <h3>⚠️ 错误提示</h3>
            <p id="error-message"></p>
            <button id="error-close" class="action-btn">确定</button>
        </div>
    </div>

    <!-- JavaScript 模块 -->
    <script type="module" src="/static/js/main.js?v=20241231-fixed-api"></script>
</body>
</html>